<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #wrapper {
      width: 1024px;
      margin: 0 auto;
    }
    .process-bar {
      height: 40px;
      width: 40px;
      background-color: #69c;
    }
    .process-bar:hover {
      width: 960px;
    }
    #bar1 {
      transition: width 5s linear;
    }
    #bar2 {
      transition: width 5s ease;
    }
    #bar3 {
      transition: width 5s ease-in;
    }
    #bar4 {
      transition: width 5s ease-out;
    }
    #bar5 {
      transition: width 5s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <p>linear</p>
    <div id="bar1" class="process-bar"></div>
    <p>ease</p>
    <div id="bar2" class="process-bar"></div>
    <p>ease-in</p>
    <div id="bar3" class="process-bar"></div>
    <p>ease-out</p>
    <div id="bar4" class="process-bar"></div>
    <p>ease-in-out</p>
    <div id="bar5" class="process-bar"></div>
  </div>
</body>
</html>
